<!DOCTYPE html>
<html>
<head includeDefault="true">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <title>3D库图显示</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    #label {
      position: absolute;
      padding: 10px;
      background: rgba(255, 255, 255, 0.6);
      line-height: 1;
      border-radius: 5px;
    }

    #video {
      position: absolute;
      width: 0;
      height: 0;
    }
  </style>
  <script src="./ThreeJs/js/three.js"></script>
  <script src="./ThreeJs/js/stats.min.js"></script>
  <script src="./ThreeJs/js/DragControls.js"></script>
  <script src="./ThreeJs/js/OrbitControls.js"></script>
  <script src="./ThreeJs/js/FirstPersonControls.js"></script>
  <script src="./ThreeJs/js/TransformControls.js"></script>
  <script src="./ThreeJs/js/dat.gui.min.js"></script>
  <script src="./ThreeJs/js/EffectComposer.js"></script>
  <script src="./ThreeJs/js/RenderPass.js"></script>
  <script src="./ThreeJs/js/OutlinePass.js"></script>
  <script src="./ThreeJs/js/FXAAShader.js"></script>
  <script src="./ThreeJs/js/CopyShader.js"></script>
  <script src="./ThreeJs/js/ShaderPass.js"></script>
  <script src="./ThreeJs/js/ThreeBSP.js"></script>
  <script src="./ThreeJs/ThreeJs_Drag.js" charset="UTF-8"></script>
  <script src="./ThreeJs/ThreeJs_Composer.js" charset="UTF-8"></script>
  <script src="./ThreeJs/Modules.js" charset="UTF-8"></script>
  <script src="./ThreeJs/js/Tween.js"></script>
  <script src="./ThreeJs/js/jquery-1.11.0.min.js"></script>
  <script src="./ThreeJs/config.js"></script>
</head>

<body>
  <div id="label"></div>

  <div id="container"></div>
  <script>

    var stats = initStats();
    var scene, camera, renderer, controls, light, composer,transformControls, options;
    var matArrayA = []; //内墙
    var matArrayB = []; //外墙
    var group = new THREE.Group();

    // 初始化场景
    function initScene() {
      scene = new THREE.Scene();
    }

    // 初始化相机
    function initCamera() {
      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 7000);
      camera.position.set(0, 50, 200);
    }

    // 初始化灯光
    function initLight() {
      var directionalLight = new THREE.DirectionalLight(0xffffff, 0.3); //模拟远处类似太阳的光源
      directionalLight.color.setHSL(0.1, 1, 0.95);
      directionalLight.position.set(0, 200, 0).normalize();
      scene.add(directionalLight);

      var ambient = new THREE.AmbientLight(0xffffff, 1); //AmbientLight,影响整个场景的光源
      ambient.position.set(0, 0, 0);
      scene.add(ambient);
    }

    // 初始化性能插件
    function initStats() {
      var stats = new Stats();

      stats.domElement.style.position = 'absolute';
      stats.domElement.style.left = '0px';
      stats.domElement.style.top = '0px';

      document.body.appendChild(stats.domElement);
      return stats;
    }

    // 初始化渲染器
    function initRenderer() {
      renderer = new THREE.WebGLRenderer({
        antialias: true
      });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0x4682B4, 1.0);
      document.body.appendChild(renderer.domElement);
    }
	
	var storehouse={x:1000,y:300,z:1500,partlist:[
			{x:400,z:400,px:-250,pz:-500,name:"A0",shelveslist:[
				{lnum:1,cnum:5,name:1,istop:true},
				{lnum:2,cnum:5,name:2,istop:true},
				{lnum:3,cnum:5,name:3,istop:true},
			]},
			{x:400,z:400,px:250,pz:-500,name:"B0",shelveslist:[
				{lnum:3,cnum:2,name:1,istop:false},
				{lnum:3,cnum:3,name:2,istop:false},
				{lnum:3,cnum:4,name:3,istop:false},
				{lnum:3,cnum:5,name:4,istop:false},
			]},
			{x:400,z:400,px:-250,pz:0,name:"C0",shelveslist:[
				{lnum:3,cnum:5,name:1,istop:true},
				{lnum:3,cnum:5,name:2,istop:true},
				{lnum:3,cnum:5,name:3,istop:true},
			]},
			{x:400,z:400,px:250,pz:0,name:"D0",shelveslist:[
				{lnum:1,cnum:5,name:1,istop:true},
				{lnum:2,cnum:5,name:2,istop:true},
				{lnum:3,cnum:5,name:3,istop:true},
			]},
			{x:400,z:400,px:-250,pz:500,name:"E0",shelveslist:[
				{lnum:3,cnum:2,name:1,istop:true},
				{lnum:3,cnum:3,name:2,istop:true},
				{lnum:3,cnum:4,name:3,istop:true},
				{lnum:3,cnum:7,name:4,istop:true},
			]},
			{x:400,z:400,px:250,pz:500,name:"F0",shelveslist:[
				{lnum:3,cnum:5,name:1,istop:true},
				{lnum:3,cnum:5,name:2,istop:true},
				{lnum:3,cnum:5,name:3,istop:true},
				{lnum:3,cnum:5,name:4,istop:true},
				{lnum:3,cnum:5,name:5,istop:true}
			]}
		]
	};

    function initContent() {
		initMatArry();
		createAxis(storehouse.x,storehouse.y,storehouse.z,scene);
		createFloorAndWall(storehouse.x,storehouse.y,storehouse.z,scene);
		createPart(storehouse.partlist,scene)
		SGeometry(storehouse.x,2,100,0,0,-250,"道路1",scene,{color:0x00ff00})
		SGeometry(storehouse.x,2,100,0,0,250,"道路2",scene,{color:0x00ff00})
		SGeometry(100,2,storehouse.z,0,0,0,"道路3",scene,{color:0x00ff00})
		
    }

    // 初始化轨迹球控件
    function initControls() {
      controls = new THREE.OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      controls.dampingFactor = 0.5;
      // 视角最小距离
      controls.minDistance = 100;
      // 视角最远距离
      controls.maxDistance = 10000;
      // 最大角度
      controls.maxPolarAngle = Math.PI / 2.2;
      controls.target = new THREE.Vector3(50,50,0);
    }
    // 初始化
    function init() {
      initScene();
      addSkybox( 10000, scene );
      initCamera();
      initRenderer();
      initContent();
      initLight();
      initControls();
	
      //添加选中时的蒙版
      composer = new THREE.ThreeJs_Composer(renderer, scene, camera, options);

      //添加拖动效果
      // 过滤不是 Mesh 的物体,例如辅助网格
      var objects = [];
      for (var i = 0; i < scene.children.length; i++) {
          var Msg =  scene.children[i].name.split("-");
          if (scene.children[i].isMesh && Msg[0] == "货物") {
              objects.push(scene.children[i]);
          }
      }

      var dragControls = new THREE.DragControls( objects, camera, renderer.domElement );
      dragControls.addEventListener( 'dragstart', function ( event ) {
		  deletePositionGoods(event.object)
          controls.enabled = false;
          isPaused = true;
      } );
      dragControls.addEventListener( 'dragend', function ( event ) {
		//重置拖动货物位置
		  resetObjectPosition(event.object)
          controls.enabled = true;
          isPaused = false;
      } );

      document.addEventListener('resize', onWindowResize, false);
    }
	
	
	function deletePositionGoods(object){
		for(var i=0;i<gPositionList.length;i++){
			if(object.name.indexOf(gPositionList[i].name)>-1){
				gPositionList[i].istrue= false;
			}
		}
	}
	//重置拖动货物位置
	function resetObjectPosition(object){
		var x = Number((object.position.x).toFixed(2));
		var y = Number((object.position.y).toFixed(2));
		var z = Number((object.position.z).toFixed(2));
		var x1,y1,z1,x2,y2,z2;
		for(var i=0;i<gPositionList.length;i++){
			if(!gPositionList[i].istrue){
				x1 = Number(gPositionList[i].px) - Number(gPositionList[i].x/2);
				y1 = Number(gPositionList[i].py) - Number(gPositionList[i].y/2);
				z1 = Number(gPositionList[i].pz) - Number(gPositionList[i].z/2);
				x2 = Number(gPositionList[i].px) + Number(gPositionList[i].x/2);
				y2 = Number(gPositionList[i].py) + Number(gPositionList[i].y/2);
				z2 = Number(gPositionList[i].pz) + Number(gPositionList[i].z/2);
				if(x1<=x && x<=x2 && y1<=y && y<=y2 && z1<=z && z<=z2){
					object.position.set(gPositionList[i].px,gPositionList[i].py,gPositionList[i].pz);
					scene.add(object)
					renderer.render(scene, camera);
					gPositionList[i].istrue = true;
				}
			}
		}
	}
	

    // 窗口变动触发的方法
    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      composer.render();
      update();
    }

    // 更新控件
    function update() {
      stats.update();
      controls.update();
      TWEEN.update();
      RollTexture.offset.x += 0.001;
    }

    init();
    animate();
  </script>
</body>

</html>
